<template>
	<view>
		<view class="navbar" :style="{position:headerPosition}">
			<view class="title" >
				<view class="title-text" >
					<view class="title-text1">{{countDay}}</view>
					<view class="title-text0">
						<text class="iconfont icon-tanhao" ></text>
						<text class="title-text2">今日获客</text>
					</view>
				</view>
				<view class="shu">丨</view>
				<view class="title-text" >
					<view class="title-text1">{{sum}}</view>
					<view class="title-text0">
						<text class="iconfont icon-tanhao" ></text>
						<text class="title-text2">累计获客</text>
					</view>
				</view>
				<view class="shu">丨</view>
				<view class="title-text" >
					<view class="title-text3">立即提醒</view>
					<view class="title-text0">
						<text class="yticon icon-naozhong"></text>
						<text class="title-text2">提醒设置</text>
					</view>
				</view>
			</view>
			
			<view class="" style="display: flex;float: right;">
				<view class="nav-item" :class="{current: filterIndex === 1}" @click="tabClick(1)">
					<text>最近看我</text>
					<view class="p-box">
						<text :class="{active: priceOrder === 1 && filterIndex === 1}" class="yticon icon-shang"></text>
						<text :class="{active: priceOrder === 2 && filterIndex === 1}" class="yticon icon-shang xia"></text>
					</view>
				</view>
				<view class="nav-item" :class="{current: filterIndex === 2}" @click="tabClick(2)">
					<text>最多看我</text>
					<view class="p-box">
						<text :class="{active: priceOrder2 === 1 && filterIndex === 2}" class="yticon icon-shang"></text>
						<text :class="{active: priceOrder2 === 2 && filterIndex === 2}" class="yticon icon-shang xia"></text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="uni-list-un">
			<view class="uni-list-cell-un" hover-class="uni-list-cell-hover-un" v-for="(value, key) in listData" :key="key" @click="goDetail(value)">
				<view class="uni-media-list-un">
					<image class="portrait" :src="value.cover|| '/static/missing-face.png'" mode="aspectFill"></image>
					<view class="badge1" v-if="value.countLook>0">{{value.countLook}}</view>
					<view class="uni-media-list-body-un">
						<view class="uni-media-list-text-bottom-un">
							<view class="uni-media-list-text-bottom-text1">{{ value.author_name }}</view>
							<view class="uni-media-list-text-bottom-text2">{{ value.published_at }}</view>
						</view>
						<view class="uni-media-list-text-top">{{ value.title }}</view>
					</view>
				</view>
			</view>
		</view>
		
		<uni-load-more :status="status"  :icon-size="16" :content-text="contentText" />
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				countDay:0,//今日获客
				sum:0,//累计获客
				filterIndex: 1, //排序方式
				priceOrder: 1, //1 最近升序 2最近降序
				priceOrder2: 0, //1 最多升序 2最多降序
				headerPosition:"fixed",
				listData: [{countLook:4,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'欢乐马',published_at:'2019-12-31 19:01:55',title:'abc'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'},
				{countLook:15,cover:'http://img.nczywc.cn/bg/user-bg9.png',author_name:'小黄鱼',published_at:'2019-12-31 18:00:01',title:'123'}],//数据数组
				last_id: '',
				reload: false,//重新加载
				status: 'more',
				contentText: {//底部上拉提示
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				}
			}
		},
		onLoad() {
			this.getList();
		},
		onPullDownRefresh() {
			this.reload = true;
			this.last_id = '';
			this.getList();
		},
		onReachBottom() {
			this.status = 'more';
			this.getList();
		},
		onPageScroll(e){
			//兼容iOS端下拉时顶部漂移
			if(e.scrollTop>=0){
				this.headerPosition = "fixed";
			}else{
				this.headerPosition = "absolute";
			}
		},
		methods: {
			getList() {
				var data = {
					column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
				};
				if (this.last_id) {
					//说明已有数据，目前处于上拉加载
					this.status = 'loading';
					data.minId = this.last_id;
					data.time = new Date().getTime() + '';
					data.pageSize = 10;
				}
				uni.request({
					url: 'https://unidemo.dcloud.net.cn/api/news',
					data: data,
					success: data => {
						if (data.statusCode == 200) {
							let list = this.setTime(data.data);
							this.listData = this.reload ? list : this.listData.concat(list);
							this.last_id = list[list.length - 1].id;
							this.reload = false;
						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					}
				});
			},
			//筛选点击
			tabClick(index){
				uni.showLoading({
				 title: '正在加载'
				})
				
				this.filterIndex = index;
				
				if(index==1){
					this.priceOrder = this.priceOrder === 1 ? 2: 1;
				}else{
					this.priceOrder = 0;
				}
				
				if(index === 2){
				 this.priceOrder2 = this.priceOrder2 === 1 ? 2: 1;
				}else{
				 this.priceOrder2 = 0;
				}
				
				uni.pageScrollTo({
				 duration: 300,
				 scrollTop: 0
				})
				
				this.getList('refresh', 1);
				uni.hideLoading()
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: $page-color-base;
	}
	
	.navbar{
		position: fixed;
		left: 0;
		top: var(--window-top);
		width: 100%;
		height: 210upx;
		background: #fff;
		// box-shadow: 0 2upx 10upx rgba(0,0,0,.06);
		z-index: 10;
		text-align: center;
		.title{
			display: flex; 
			border-bottom: #CCCCCC 1upx solid;
			.shu{
				color: #CCCCCC;
				line-height: 100upx;
				font-weight: 500;
			}
			.title-text{
				-webkit-flex: 1;
				flex: 1;
				.title-text1{
					font-weight: 700;
				}
				.title-text0{
					line-height: 80upx;
					.icon-tanhao{
						color: #007AFF;
					}
					.yticon,.iconfont{
						margin-right: 5upx;
						font-size: 25upx;
					}
					.title-text2{
						color: #666666;
						font-size: 25upx;
					}
				}
				.title-text3{
					font-size: 30upx;
					margin: 5upx 0upx;
				}
			}
		}
		
		.nav-item{
			display: flex;
			align-items: center;
			height: 100%;
			font-size: 30upx;
			color: $font-color-dark;
			position: relative;
			margin: 20upx 30upx 0upx 0upx;
			&.current{
				color: $base-color;
				&:after{
					content: '';
					position: absolute;
					left: 40%;
					bottom: -20upx;
					transform: translateX(-50%);
					width: 120upx;
					height: 0;
					border-bottom: 4upx solid $base-color;
				}
			}
		}
		.p-box{
			display: block;
			flex-direction: column;
			.yticon{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30upx;
				height: 14upx;
				line-height: 1;
				margin-left: 4upx;
				font-size: 26upx;
				color: #888;
				&.active{
					color: $base-color;
				}
			}
			.xia{
				transform: scaleY(-1);
			}
		}
	}
	
	.uni-list-un{
		margin-top: 230upx;
		.uni-media-list-un{
			display: flex;
			background: #FFFFFF;
			margin-top: 20upx;
			position: relative;
			.portrait{
				width: 100upx;
				height: 100upx;
				border:5upx solid #fff;
				border-radius: 50%;
				margin: 25upx 20upx;
			}
			.badge1{
				position:absolute;
				width:4vw;
				height:4vw;
				background-color:#E02E24;
				top:25upx;
				left:85upx;
				border-radius:100%;
				font-size:20upx;color:#fff;
				display:flex;
				justify-content: center;
				z-index: 9;
				line-height: 4vw;
			}
			.uni-media-list-body-un{
				padding:25upx 20upx;
				.uni-media-list-text-bottom-un{
					display: flex;
					-webkit-justify-content: space-between;
					justify-content: space-between;
					width: 560upx;
					.uni-media-list-text-bottom-text1{
						font-size: 30upx;
					}
					.uni-media-list-text-bottom-text2{
						font-size: 25upx;
						color: #CCCCCC;
					}
				}
				.uni-media-list-text-top{
					font-size: 30upx;
					color: #666666;
					margin-top: 20upx;
				}
			}
		}
		
	}
	
</style>
